<template>
  <div class="task-check-manage">
    <!-- 顶部操作区 -->
    <div class="operation-bar">
      <el-input
        v-model="filters.taskName"
        placeholder="任务名称"
        style="width: 200px; margin-right: 10px;"
        clearable
      />
      <el-date-picker
        v-model="filters.assignTime"
        type="date"
        placeholder="选择一个日期"
        :disabled-date="disabledDate"
      />
     
      <el-select v-model="filters.difficulty" placeholder="难易程度" style="width: 120px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option label="简单" value="简单" />
        <el-option label="中等" value="中等" />
        <el-option label="困难" value="困难" />
      </el-select>
      <el-button type="primary" @click="handleFilter">筛选</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="tableData" 
      style="width: 100%"
      :height="600"
      border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="taskName" label="任务名称" min-width="200"/>
      <el-table-column prop="difficulty" label="难易程度" width="100">
        <template #default="scope">
          <el-tag :type="getDifficultyType(scope.row.difficulty)">
            {{ scope.row.difficulty }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="assignTime" label="分配时间" width="180" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
   </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { View, Check, Edit, Download } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 筛选条件
const filters = ref({
  taskName: '',
  assignTime: [],
  difficulty: ''
});

// 学生选项
const studentOptions = [
  { value: '1', label: '张三' },
  { value: '2', label: '李四' },
  { value: '3', label: '王五' },
  { value: '4', label: '赵六' }
];

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 对话框相关
const viewDialogVisible = ref(false);
const checkDialogVisible = ref(false);
const checkDialogType = ref('check');
const checkFormRef = ref(null);
const currentTask = ref({});

// 检查表单
const checkForm = ref({
  taskName: '',
  studentName: '',
  submitContent: '',
  score: null,
  comment: '',
  checkStatus: 'completed'
});

// 检查表单校验规则
const checkRules = {
  score: [
    { required: true, message: '请输入得分', trigger: 'blur' },
    { type: 'number', min: 0, max: 100, message: '得分必须在0-100之间', trigger: 'blur' }
  ],
  comment: [
    { required: true, message: '请输入检查评语', trigger: 'blur' },
    { min: 5, max: 500, message: '评语长度在5到500个字符', trigger: 'blur' }
  ],
  checkStatus: [
    { required: true, message: '请选择检查结果', trigger: 'change' }
  ]
};

// 获取难易程度标签类型
const getDifficultyType = (difficulty) => {
  switch (difficulty) {
    case '简单':
      return 'success';
    case '中等':
      return 'warning';
    case '困难':
      return 'danger';
    default:
      return 'info';
  }
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 'pending':
      return 'info';
    case 'checking':
      return 'warning';
    case 'completed':
      return 'success';
    case 'rejected':
      return 'danger';
    default:
      return 'info';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending':
      return '待检查';
    case 'checking':
      return '检查中';
    case 'completed':
      return '已完成';
    case 'rejected':
      return '已驳回';
    default:
      return '未知';
  }
};

// 模拟数据
const tableData = ref([
  {
    id: 1,
    taskName: '完成Java基础语法练习，包括变量定义、数据类型、运算符等',
    assignTime: '2024-01-01',
    difficulty: '简单',
  },
  {
    id: 2,
    taskName: '使用HTML、CSS、JavaScript开发一个简单的网页',
    assignTime: '2024-01-02',
    difficulty: '中等',
  },
  {
    id: 3,
    taskName: '完成复杂的SQL查询练习',
    assignTime: '2024-01-03',
    difficulty: '困难',
  },
  {
    id: 4,
    taskName: '实现快速排序算法',
    assignTime: '2024-01-01',
    difficulty: '困难',
  }
]);

// 计算总数
total.value = tableData.value.length;

// 筛选
const handleFilter = () => {
  // 这里可以实现实际的筛选逻辑
  console.log('筛选条件:', filters.value);
  ElMessage.success('筛选完成');
};

// 重置筛选
const handleReset = () => {
  filters.value = {
    taskName: '',
    assignTimeRange: [],
    checkStatus: '',
    studentName: '',
    difficulty: ''
  };
  ElMessage.success('筛选条件已重置');
};

</script>

<style scoped>
.task-check-manage {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  margin-top: 20px;
}


</style>
